<template>
  <div class="w-full h-full overflow-hidden" ref="emoji" @click.stop></div>
</template>

<script setup lang="ts">
import data from "@emoji-mart/data";
import { Picker } from "emoji-mart";
import i18n from "@emoji-mart/data/i18n/zh.json"; // 导入中文语言包

const emoji = ref<HTMLDivElement>();
const emit = defineEmits(["select"]);
onMounted(() => {
  new Picker({
    parent: emoji.value,
    onEmojiSelect(emoji: any) {
      emit("select", emoji.native);
    },
    data,
    theme: "light", // 选择主题
    i18n,
    dynamicWidth: true,
    navPosition: "none",
    searchPosition: "none",
    previewPosition: "none",
    skinTonePosition: "none"
  });
});
</script>
<style lang="css" scoped>
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
  @apply bg-[#e2e2e2] dark:bg-[#0f0f0f];
}
::-webkit-scrollbar-thumb {
  border-radius: 2px;
  @apply bg-[#0000004d] dark:bg-[#2d2d2d];
}
:deep() {
  em-emoji-picker {
    width: 100%;
  }
}
</style>
